import React, {PureComponent} from 'react'
import {View, SectionList, Text, Image, Dimensions,TouchableOpacity, StyleSheet,SafeAreaView, Animated} from 'react-native'
import Video from 'react-native-af-video-player'
import Orientation from 'react-native-orientation'

import DetailVideoHeaderView from '../../widget/video/DetailVideoHeaderView'
import DetailTeacherCell from '../../widget/detail/DetailTeacherCell'
import DetailCommentCell from '../../widget/detail/DetailCommentCell'
import DetailCommentMoreCell from '../../widget/detail/DetailCommentMoreCell'


import {SpaceView} from '../../widget/Separator'

const {width} = Dimensions.get('window')

type Props = {
    navigation:any,
}

export default class CourseVideoScene extends PureComponent<Props> {
    static navigationOptions = {
        header: null,
    };

    constructor(props) {
        super(props)
        this.state = {
            logo:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4088781923,1071907319&fm=200&gp=0.jpg',
            isShowLogo:true,
            sections: [
                {
                    data: ['http://a.hiphotos.baidu.com/image/pic/item/09fa513d269759eee5b61ac2befb43166c22dfd1.jpg'],
                    key: '111', renderItem: this._renderItemCourseComponent
                },
                {
                    data: [{
                        id: '1',
                        name: '王政',
                        detail: '王征，中国政法大学文学教授（保送），教辅畅销书《文语方程式》作者，“仿与升”作文法创始人，“法事情人”却都法创始人，书一中考写作与阅读规律，讲课逻辑清晰，亲切幽默，被学生亲切的称为“王征老师”'
                    },
                        {
                            id: '2',
                            name: '张三',
                            detail: '王征，中国政法大学文学教授（保送），教辅畅销书《文语方程式》作者，“仿与升”作文法创始人，“法事情人”却都法创始人，书一中考写作与阅读规律，讲课逻辑清晰，亲切幽默，被学生亲切的称为“王征老师”'
                        }],
                    key: '222', renderItem: this._renderItemTeacherComponent
                },
                {
                    data: [{
                        id: '1',
                        name: '天堂的榨菜',
                        source: '来自：初中懒人语文顶级套餐班',
                        time: '2018.03.20 12:33',
                        comment: '王征，中国政法大学文学教授（保送），教辅畅销书《文语方程式》作者，“仿与升”作文法创始人，“法事情人”却都法创始人，书一中考写作与阅读规律，讲课逻辑清晰，亲切幽默，被学生亲切的称为“王征老师”'
                    },
                        {
                            id: '2',
                            name: '天堂的榨菜',
                            source: '来自：初中懒人语文顶级套餐班',
                            time: '2018.03.20 12:33',
                            comment: '王征，中国政法大学文学教授（保送），教辅畅销书《文语方程式》作者，“仿与升”作文法创始人，“法事情人”却都法创始人，书一中考写作与阅读规律，讲课逻辑清晰，亲切幽默，被学生亲切的称为“王征老师”'
                        },
                        {id: '3', type: '1'},],
                    key: '333', renderItem: this._renderItemCommentComponent
                },


            ],
        }
    }


    _listHeader() {
        return <DetailVideoHeaderView/>
    }

    _extraUniqueKey = (item, index) => {
        return index + item;
    };
    _renderItemCourseComponent = ({item}) => {
        return (<View style={{alignItems:'center'}} key={item}>
            <Image style={{width:(width - 20),height:200}} source={{uri:item,cache:'force-cache'}}/>
        </View>)
    }
    _renderItemTeacherComponent = ({item}) => {
        return <DetailTeacherCell info={item} key={item.id}/>
    }
    _commentMore(){
    }
    _renderItemCommentComponent = ({item}) => {
        if (item.type) {
            return <DetailCommentMoreCell key={item.id} onPress={()=>{this._commentMore()}}/>
        } else {
            return <DetailCommentCell info={item} key={item.id}/>
        }
    }

    renderHeader = ({section}) => {
        if (section.key == '111') {
            return (
                <View style={{backgroundColor:'white'}}>
                    <SpaceView/>
                    <View style={styles.header_view}>
                        <Text style={styles.header_select_title}>课程介绍</Text>
                        {/*<Text style={styles.header_title}>主讲老师</Text>*/}
                        {/*<Text style={styles.header_title}>评价</Text>*/}
                    </View>
                </View>

            )
        } else if (section.key == '222') {
            return (
                <View style={{backgroundColor:'white'}}>
                    <SpaceView/>
                    <View>
                        <Text style={styles.header_text}>老师介绍</Text>
                    </View>
                </View>
            )
        } else {
            return (
                <View style={{backgroundColor:'white'}}>
                    <SpaceView/>
                    <View style={styles.header_comment_view}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Text style={styles.header_text}>评价</Text>
                            <Text style={{color:'rgba(0,0,0,0.5)',fontSize:12,marginLeft:11}}>(共88条)</Text>
                        </View>
                    </View>
                </View>
            )
        }


    }

    render() {

        const url = 'https://vfx.mtime.cn/Video/2017/01/05/mp4/170105105137886980_480.mp4'
        const placeholder = 'http://img5.mtime.cn/mg/2017/01/05/105124.57142324_235X132X4.jpg'
        const title = '极限特工'

        return (
            <SafeAreaView style={{flex:1,backgroundColor:'white'}}>
                    <Video
                        style={{position:'absolute'}}
                        url={url}
                        title={title}
                        rotateToFullScreen={true}
                        logo={this.state.logo}
                        placeholder={placeholder}
                        //theme={'#DB3843'}  主题颜色（包括控制按钮，进度条，标题）设置，默认是白色
                        lockPortraitOnFsExit={true}
                        logoOnPress={()=>{this.props.navigation.goBack()
                            Orientation.lockToPortrait()
                        }}
                    />
                    <SectionList
                        // contentContainerStyle={styles.list}
                        // pageSize={3}
                        // style={{marginTop:300,}}

                        stickySectionHeadersEnabled={true}
                        ref={(e) =>{this.section_list = e;}}
                        ListHeaderComponent={this._listHeader()}
                        keyExtractor={this._extraUniqueKey}
                        renderSectionHeader={this.renderHeader}
                        sections={this.state.sections}
                    />
            </SafeAreaView>
        )
    }
}
const styles = StyleSheet.create({
    header_title: {
        color: 'rgba(0,0,0,0.7)',
        fontSize: 15,
    },
    header_view: {
        flexDirection: 'row',
        // justifyContent:'space-around',
        height: 54,
        backgroundColor: 'white',
        alignItems: 'center',
    },
    header_select_title: {
        color: 'rgb(0,0,0)',
        fontSize: 15,
        fontWeight: 'bold',
        marginLeft: 12,
    },
    header_text: {
        color: 'black',
        fontSize: 16,
        marginLeft: 12,
        marginTop: 20,
        marginBottom: 20,
        fontWeight: '900',
    },
    header_comment_view: {
        width: width,
        height: 45,
        backgroundColor: 'white',
    },
    list: {
        //justifyContent: 'space-around',
        flexDirection: 'row',//设置横向布局
        flexWrap: 'wrap',  //设置换行显示
        alignItems: 'flex-start',
        backgroundColor: '#FFFFFF'
    },
})